import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Table } from "antd";
import getFields from "./getFields.js";
import axios from "axios";
import FormCom from "../../../common/FormCom";
import PaginationCom from "../../../common/PaginationCom";
import { orderState, orderObj } from "../common/orderEum.js";
import "./index.css";
/**选择每页多少条纪律的状态值 默认每页显示10条纪律*/
let pageNum = 10;
/**选择第几页的状态值 默认显示第一页*/
let pageIndex = 1;
/**设置检索状态 */
let condition = {};
export default function PoiManageList() {
  let navigation = useNavigate();
  const [form] = Form.useForm();
  const [data, setData] = useState([]);

  function queryOrders() {
    axios({
      headers: {
        tenantId: 500,
        userId: 11111,
      },
      method: "post",
      url: "http://localhost:9103/order/catering/search",
      data: {
        condition,
        pageIndex: pageIndex,
        pageSize: pageNum,
        sortFields: [
          { field: "created_at", asc: false },
          { field: "last_modified_at", asc: false },
        ],
      },
    }).then((data) => {
      setData(data.data);
    });
  }
  useEffect(() => {
    queryOrders(); //无延时  防止页面停留无数据页面太久
  }, []);

  useEffect(() => {
    setTimeout(function () {
      queryOrders(); //延时加载
    }, 1000);
  }, []);

  /**
   * 查询请求格式化
   * @param  values
   */
  function formatJSON(values) {
    const obj = {
      status: values.status,
      tableNo: values.tableNo,
      customerCount: values.customerCount,
      totalPrice: { from: values.from, to: values.to },
    };
    /**
     * 去除 空串
     */
    for (const key in obj) {
      if (obj[key] === "") {
        delete obj[key];
      }
    }
    return obj;
  }

  const onFinish = (values) => {
    condition = formatJSON(values);
    queryOrders();
  };

  const columns = [
    {
      title: "状态",
      dataIndex: "status",
      render: (item) => <div className="stateDiv">{orderState[item]}</div>,
    },
    {
      title: "门店",
      dataIndex: ["shopSnapshotOnPlace", "name"],
    },
    {
      title: "座位号",
      dataIndex: "tableNo",
    },
    {
      title: "就餐人数",
      dataIndex: "customerCount",
    },
    {
      title: "订单总价",
      dataIndex: "totalPrice",
    },
    {
      title: "操作",
      dataIndex: this,
      render: (text) =>
        orderObj[text.status].map((item, index) => {
          if (index === 0) {
            return (
              <a
                onClick={() => {
                  navigation(`/order/${item.path}`, { state: text });
                }}
              >
                {item.des}
              </a>
            );
          } else {
            return (
              <>
                &nbsp; | &nbsp;
                <a
                  onClick={() => {
                    navigation(`/order/${item.path}`, { state: text });
                  }}
                >
                  {item.des}
                </a>
              </>
            );
          }
        }),
    },
  ];

  return (
    <div>
      <FormCom
        onFinish={onFinish}
        initialValues={{ status: "" }}
        name="订单List页面"
        getFields={getFields()}
        resetFields={() => {
          condition = {};
          queryOrders();
          form.resetFields();
        }}
      />

      <Table
        pagination={false}
        dataSource={data.records}
        columns={columns}
        rowKey="id"
      />

      <PaginationCom
        totalCount={data.totalCount}
        pageNum={pageNum}
        changePageIndex={(num) => {
          pageIndex = num;
          queryOrders();
        }}
        changePageNum={(num) => {
          pageNum = num;
          queryOrders();
        }}
      />
    </div>
  );
}
